<template>
    <div class= "menu">
        <ul  >
            <li class= "menuButton" >
                <div @click= "onMenuButtonClicked(0)" :class= "selctIndex == 0?'menuButtonInfo iconfont selectedColor':'menuButtonInfo iconfont'">&#xe67d; 搜索</div>
                <div v-show= "selctIndex == 0" class= "searchBox">
                    <input type="text" v-model= "searchMessage">
                    <span class= "searchButton icon">&#xe67d;</span>
                </div>
            </li>
            <li class= "menuButton">
                <div  @click= "onMenuButtonClicked(1)" class= "menuButtonInfo iconfont">{{isCollected ?'&#xe60f;':'&#xe629;'}} 收藏</div>
            </li>
            <li class= "menuButton">
                <div @click= "onMenuButtonClicked(2)" :class= "selctIndex == 2?'menuButtonInfo iconfont fl selectedColor':'menuButtonInfo iconfont fl'" >&#xe687; 收藏夹</div>
                <ul v-show= "selctIndex == 2" class="collectionBox">
                    <li v-for= "item in collectionData" :key= "item.collectionId" @click= " onCollectionItemClicked(item.collectionId)" class= "collectionItem ">
                        <img class= "collectionImage" :src= "item.imageUrl" alt="">
                        <span :class= "item.selected?'collectionTitle selectedColor':'collectionTitle'">{{item.theme}}</span>
                    </li>                   
                </ul>              
            </li>
            <li  class= "menuButton">
                <div @click= "onMenuButtonClicked(3)" :class= "selctIndex == 3?'menuButtonInfo iconfont selectedColor':'menuButtonInfo iconfont'">&#xe648; 工具 {{selctIndex == 3?'&#xe61d;':'&#xe626;'}}</div>
                <ul v-show= "selctIndex == 3" class="toolMenuBox">
                    <li @click= "getDistanceByCartographic()" :class= "measureType == 0?'toolMenuButton selectedColor':'toolMenuButton'"><span class="icon">&#xe7df;</span>距离测量</li>
                    <li @click= "getAeraByCartographic()" :class= "measureType == 1?'toolMenuButton selectedColor':'toolMenuButton'"><span class="icon">&#xf0028;</span>面积测量</li>
                    <li @click= "getClikedPointPosition()" :class= "measureType == 2?'toolMenuButton selectedColor':'toolMenuButton'"><span class="icon">&#xe64b;</span>坐标</li>
                    <li @click= "onToolMenuButtonClicked(3)" :class= "measureType == 3?'toolMenuButton selectedColor':'toolMenuButton'"><span class="icon">&#xeba2;</span>打点</li>
                    <li @click= "onToolMenuButtonClicked(4)" :class= "measureType == 4?'toolMenuButton selectedColor':'toolMenuButton'"><span class="icon">&#xe614;</span>图例</li>
                </ul>
            </li>
        </ul>
        <div v-show= "isShowCaptureImage" ref="captureImage" class="screenCaptureBox">
            <img   :src= "captureImageUrl" alt="">
        </div>      
    </div>
</template>

<script>
import bus from '../../eventBus'
import html2canvas from 'html2canvas'
export default {
    name:'toolBar',
    data(){
        return{
            selctIndex:-1,//选择序号，
            searchMessage:'输入...',
            isCollected:false,//是否已收藏
            collectionData:[],  
            measureType:-1,//测量类型 
            isShowCaptureImage :false,
            captureImageUrl:'',
        }
    },
    methods:{      
        //测量距离
        getDistanceByCartographic(){
            this.onToolMenuButtonClicked(0);
            bus.$emit('getDistanceByCartographic');
        },
        //测量面积
        getAeraByCartographic(){
            this.onToolMenuButtonClicked(1);
            bus.$emit('getAeraByCartographic');
        },
        //获取点的经纬度坐标
        getClikedPointPosition(){
            this.onToolMenuButtonClicked(2);
            bus.$emit('getClikedPointPosition')
        },
        //菜单栏点击
        onMenuButtonClicked(index){
            switch (index){
                case 0:
                     if(this.selctIndex == index){
                        this.selctIndex = -1;
                        return;
                     }
                      this.selctIndex = index;
                    break;
                case 1:
                    this.selctIndex = -1;
                    this.onCollectButtonClicked();
                    break;
                case 2:
                    if(this.selctIndex == index){
                        this.selctIndex = -1;
                        return;
                    }
                    this.selctIndex = index;
                    break;
                case 3:
                    if(this.selctIndex == index){
                        this.onToolMenuButtonClicked(-1);
                        this.selctIndex = -1;
                        bus.$emit('stopMeasure');
                        return;
                    }
                    this.selctIndex = index;
                    break;
            }     
        },
        //工具栏点击
        onToolMenuButtonClicked(index){
            this.measureType = index;        
        },
        //收藏按钮点击   按顺序调用，因为截屏需要时间，直接调用保存主题和导航栏状态，会出现图片路径还未生成的情况   
        onCollectButtonClicked(){
            this.isCollected = !this.isCollected;
            if(this.isCollected){
                this.screenShot();
            }         
        },
        //截屏
        screenShot(){
            window.viewer.scene.render();   
            let _this = this;
            html2canvas(document.getElementById("background"), {backgroundColor:null, useCORS: true}).then(canvas => {
                let url = canvas.toDataURL("image/png");
                _this.$refs.captureImage.style = '';
                _this.captureImageUrl = url;  //base64
                _this.showCaptureImage();         
            })
        },
        //显示截屏图片     后期可能修改为图片存到后端了再调用隐藏截屏。
        showCaptureImage(){
            this.isShowCaptureImage =true;
            setTimeout(()=>{
                this.$refs.captureImage.style = 'width:0px;height:0px;padding:0;transition: all 1s;';
                this.saveTreeStateAndTheme();
            },1000)
        },
        // 保存主题和导航栏的装态
        saveTreeStateAndTheme(){          
            let imageUrl = this.captureImageUrl;
            if(this.isCollected){
                let treeState;
                let theme;
                let navigationData;
                let cameraState;
                let _this = this;         
                bus.$emit('rememberTreeState',function (val){
                    treeState = val;
                });
                bus.$emit('getTheme',function(val){
                    theme = val;
                });
                bus.$emit('getNavigationData',function(val){
                    navigationData = val;
                });
                bus.$emit('getCameraState',function(val){
                    cameraState = val;
                });
                this.collectionData.push({
                    treeState:treeState,
                    theme: theme,
                    navigationData: navigationData,
                    imageUrl: imageUrl,
                    selected:true,
                    collectionId: _this.collectionData.length,
                    cameraState: cameraState,
                })
            }          
        },
        //收藏夹里的内容点击
        onCollectionItemClicked(collectionId){
            this.collectionData.forEach(element=>{
                if(element.collectionId == collectionId){
                    element.selected = true;
                    bus.$emit('initTheme',element.theme);
                    element.navigationData.detailTitle.label="测试地标";
                    bus.$emit('initNavigationData',element.navigationData);
                    bus.$emit('initTotalTreeState',element.treeState);
                    bus.$emit('setCameraToPosition',element.cameraState);
                }else{
                    element.selected = false;
                }
            });
        },
      
    }
}
</script>

<style scoped>
@import  '../../css/reset.css';
/* 功能框 ------------------------- */
    .menu{
        width: 420px;
        height: 40px;
        position: fixed;
        left: 31px;
        top: 77px;
        background-image: url('../../assets/rightButton.png');
        background-size: 100% 100%;   
    }

    .menu>ul{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
    }

    .menuButton{
        width: 104px;
        height: 40px;  
        cursor: pointer;
        flex-direction: column;
    }

    .menuButton:nth-last-child(n+2){
        border-right: 1px solid #4d6278;
    }

    .menuButtonInfo{
        width: 105px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 16px;
    } 

    /* 搜索框 */
    .searchBox{
        display: block;
        width: 420px;
        height: 46px;
        margin-top: 10px;
        background-image: url('../../assets/regionBackground.png');
        background-size: 100% 100%;
    }

    .searchBox input{
        width: 360px;
        height: 46px;
        box-sizing: border-box;        
        padding: 0 0 0 25px;
        background-image: url('../../assets/toolBackground.png');
        background-size: 100% 100%;
        background-color: rgba(1, 1, 1, 0);
        border: none;
        border-right: 1px solid #4f6ea4;
        outline: none;
        vertical-align: top;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.7;
    }

    .searchButton{
        display: inline-block;
        width: 60px;
        height: 46px;
        color: #0090ff;
        line-height: 46px;
        cursor: pointer;
    }
    /* 收藏 */
     .screenCaptureBox{
        position: absolute;
        top: 20px;
        left: 262.5px;
        width: 960px;
        height: 540px;
        padding: 50px;
        box-sizing: border-box;
        background-color: rgba(0, 0,0,0.4);       
     }

     .screenCaptureBox>img{          
        width: auto;  
        height: auto;  
        max-width: 100%;  
        max-height: 100%;  
     }
    /* 收藏夹 */
    .collectionBox{
        display: block;
        width: 210px;
        height: 370px;
        background-image: url('../../assets/toolBackground.png');
        background-size: 100% 100%;
        overflow-x:hidden;
        overflow-y:scroll;
        -webkit-overflow-scrolling : touch; 
    }
    .collectionItem{
        display: block;
        width: 194px;
        height: 50px;
        padding: 14px 5px;
    }

    .collectionImage{
        width: 80px;
        height: 50px;
        padding-right: 10px;
    }

    .collectionTitle{
        display: inline-block;
        width: 104px;
        height: 50px;
        overflow: hidden;
        color: #fff;
        font-size: 14px;
        line-height: 15px;
        vertical-align: top;
    }

  /* 工具*/
    .toolMenuBox{
        display: inline-block;
        width: 100%;
        background-image: url('../../assets/toolBackground.png');
        background-size: 100% 100%;
    }

    .toolMenuButton{
        display: block;
        width: 100%;
        height: 33px;
        padding-left: 15px;
        box-sizing: border-box;
        line-height: 33px;
        font-size: 14px;
        color: #fff;
        text-align: left;
    }

    .icon {
        font-family: "iconfont" !important;
        font-size: 22px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .selectedColor{
        color: #0090ff;
    }
  
  /* 整个页面的滑动条修改*/
    ::-webkit-scrollbar { 
        width: 6px;
    } 

   /* --修改 滚动条的 下面 的 样式 */
    ::-webkit-scrollbar-track {
        margin: 2px 0px 2px 0;
        background-color: #0b3374;
    }

  /* // <!--修改 滑块 --> */
    ::-webkit-scrollbar-thumb {
        background-color: #0d51c3; 
    }
</style>